import { connect } from "react-redux";
import { getDtrec } from "../../action/action";
import "./dtrec.scss"
import { Link } from 'react-router-dom';
class DtrecUI extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.props.init()
    }
    render() {
        let { dtrecData } = this.props;
        let domList = [];
        if (dtrecData) {

            dtrecData.itemList.map((item, index) => {
                let tagList = item.data.content.data.tags.map((item, index) => (
                    <span key={index}>{item.name}</span>
                ))
                domList.push(
                    <li key={index}>
                        <Link to={"/video/" + item.data.header.id}>
                            <div className="info">
                                <div className="via">
                                    <img src={item.data.content.data.author.icon} />
                                </div>
                                <div className="msg">
                                    <h4>{item.data.content.data.author.name}</h4>
                                    <p><span>发布：</span>{item.data.content.data.title}</p>
                                </div>
                            </div>
                            <p>{item.data.content.data.description}</p>
                            <div className="bank-tip">
                                {tagList}
                            </div>
                            <div className="imgBox">
                                <img src={item.data.content.data.cover.detail} />
                            </div>
                            <div className="inter">
                            </div>
                        </Link>
                    </li>
                )
            })

            return (
                <div className="dtrec">
                    <div className="bank-box">
                        <ul>
                            {domList}
                        </ul>
                    </div>
                </div>
            )
        } else {
            return (
                <div></div>
            )
        }
    }
}
let mstp = ({ dtrec }) => dtrec;
let msdp = (dispatch, props) => {
    return {
        init() {
            let id = props.match.params.id;
            dispatch(getDtrec(id))
        }
    }
}
export let Dtrec = connect(mstp, msdp)(DtrecUI)